Es muy importanta hacer que el usuario sepa que el navegador está procesando la petición, sobre todo cuando la página es muy grande y tarda mucho en cargar.
Con este pequeño código se mostrará un DIV con una imagen en movimiento. Se puede personalizar todo lo que querais, ya que es simplemebte es un DIV.
Lo único que hay que mantener es el ID del DIV, o si lo cambiais recordar tambien cambiarlo en el código del JAVASCRIPT.
El código HTML
< div title="Click para Cerrar" id="carga" style="cursor:pointer;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;box-shadow:inset # 696763 0px 0px 14px;background-position:center;background-size:100%;background-color:# fff;width:300px;color:# fff;text-align:center;height:170px;padding:52px 12px 12px 12px;position:fixed;top:30%;left:40%;z-index:6;">
< img AlternateText="Loading" src='Internet.gif' />
< /div>
El código JQUERY
< script type="text/javascript">
function cargando() {
$("# carga").animate({ "opacity": "1" }, 1000, function () { $("# carga").css("display", "Block"); });
}
function cerrar() {
$("# carga").animate({ "opacity": "0" }, 1000, function () { $("# carga").css("display", "none"); });
}
$(document).ready(function () {
window.onload = cerrar;
$("# carga").click(function () { cerrar(); });
window.onbeforeunload = cargando;
});
< /script>
En cuanto carga,
evento onload(), la página muestra el DIV hasta que se ha cargado completamente,
evento document.ready(). Luego además antes de abandonar la página vuenve a mostrar el DIV con el
evento onbeforeunload(). Así conseguimos que siempre se muestre nuestro DIV de
Cargando inclusive en los eventos
postback.
#trucos #jquery #HTML